找传奇、传世资源到传世资源站!

css实现呼吸灯效果

8.5玩家评分(1人评分)
下载后可评
介绍 评论 失效链接反馈

css实现呼吸灯效果 HTML/CSS-第1张<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Breathe Button - iinterest</title><style type="text/css">/*resize*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,menu {margin:0;padding:0;}body {font-size:12px;-webkit-text-size-adjust:none;font-family:Arial,Helvetica,sans-serif;}img {border:none;}ol,ul {list-style:none;}em {font-style:normal;}a {text-decoration:none;}.clearfix {#zoom:1;}.clearfix:after {content:' ';display:block;height:0;clear:both;color:#fff;}body {background:#333;}.breathe-btn {position:relative;width:100px;height:10px;margin:40px auto;line-height:40px;border:1px solid #2b92d4;border-radius:5px;color:#fff;font-size:20px;text-align:center;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.3);overflow:hidden;background-image:-webkit-gradient(linear,left top,left bottom,from(#6cc3fe),to(#21a1d0));-webkit-animation-timing-function:ease-in-out;-webkit-animation-name:breathe;-webkit-animation-duration:2700ms;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;}@-webkit-keyframes breathe {0% {opacity:.2;box-shadow:0 1px 2px rgba(255,255,255,0.1);}100% {opacity:1;border:1px solid rgba(59,235,235,1);box-shadow:0 1px 30px rgba(59,255,255,1);}}</style></head><body><div class="breathe-btn"></div></body></html>

评论

发表评论必须先登陆, 您可以 登陆 或者 注册新账号 !


在线咨询: 问题反馈
客服QQ:174666394

有问题请留言,看到后及时答复